<div class="top-left">
  <span class="location-title">页面编辑器</span>
  <nz-breadcrumb [nzSeparator]="iconTemplate1">
    <nz-breadcrumb-item>
      <a [routerLink]="['/main/page-editor']">首页</a>
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>
      <a>{{pageModel.modelName}}</a>
    </nz-breadcrumb-item>
  </nz-breadcrumb>
  <ng-template #iconTemplate1><i nz-icon nzType="caret-right" nzTheme="outline"></i></ng-template>
</div>
<div class="main-content">
  <div class="top">
    <button class="create-button" [disabled]="!isLoad" nz-button nzType="primary" [routerLink]="['/main/page-editor']"
      style="background: #22265B;">返回</button>
    <button class="create-button" [disabled]="!isLoad" nz-button nzType="primary" style="background: #22265B;"
      (click)="isVisible=true">预览</button>
    <button class="create-button" [disabled]="!isLoad" nz-button nzType="primary" style="background: #22265B;"
      (click)="copyPage()">创建副本</button>
    <button class="create-button" [disabled]="!isLoad" nz-button nzType="primary" (click)="remove()"
      nzDanger>删除页面</button>
  </div>
  <div class="editor-box">
    <div class="left">
      <div class="label" style="margin: 15px 0;padding: 0 4px;text-align: center;">组件</div>
      <div class="label-box" dragula="PERSON" id="left" [(dragulaModel)]="tools">

        <div class="label " *ngFor="let item of tools" nzTooltipTitle="{{item.name}}" nzTooltipPlacement="right"
          nz-tooltip><img class="item-move" src="{{item.icon}}"></div>
      </div>
      <div class="label-box">
        <div class="label">页面配置</div>
        <div class="label" (click)="selectEl=null;selectElIndex='background'" nzTooltipTitle="页面配置"
          nzTooltipPlacement="right" nz-tooltip><img src="/assets/images/page-editor/icon8.png"></div>
      </div>


    </div>
    <nz-skeleton [nzActive]="true" [nzLoading]="!isLoad">
      <div *ngIf="isLoad" class="mid" [ngStyle]="background" dragula="PERSON" id="right"
        [dragulaModel]="pageModel.model.els"
        [style.border]="selectElIndex=='background'?'5px solid #394199':'5px solid #333'">
        <ng-container *ngFor="let item of pageModel.model.els;let i=index">

          <div class="el item-move title" (click)="select($event,item,i)" *ngIf="item.type=='title'"
            [class.select]="selectElIndex==i"
            [ngStyle]="{backgroundColor:item.backgroundColor,color: item.color,textAlign:item.textAlign}">
            {{item.text||'标题组件'}}
          </div>

          <div class="el item-move player" (click)="select($event,item,i)" *ngIf=" item.type=='player'"
            [class.select]=" selectElIndex==i">
            VR直播播放器组件
            <div class="topLeft" *ngIf="item.topLeft">XXX</div>
            <div class="topRight" *ngIf="item.topRight">XXX</div>
            <div class="bottomLeft" *ngIf="item.bottomLeft">XXX</div>
            <div class="bottomRight" *ngIf="item.bottomRight">XXX</div>
          </div>

          <div class="el item-move roomList" (click)="select($event,item,i)" *ngIf="item.type=='roomList'"
            [class.select]="selectElIndex==i">
            直播间列表组件
          </div>

          <div class="el item-move advert" (click)="select($event,item,i)" *ngIf="item.type=='advert'"
            [class.select]="selectElIndex==i">
            广告组件
          </div>

          <div class="el item-move static" (click)="select($event,item,i)" *ngIf="item.type=='static'"
            [class.select]="selectElIndex==i">
            静态内容组件
          </div>

          <div class="el item-move collectplatform" (click)="select($event,item,i)" *ngIf="item.type=='collectplatform'"
            [class.select]="selectElIndex==i">
            汇集平台
          </div>

          <div class="el item-move danmuList" (click)="select($event,item,i)" *ngIf="item.type=='danmuList'"
            [class.select]="selectElIndex==i">
            弹幕列表组件
          </div>

          <div class="el danmu" id="danmu-send" (click)="select($event,item,i)" *ngIf="item.type=='danmu'"
            [class.select]="selectElIndex==i">
            弹幕发送组件
          </div>

          <div class="el tabs" id="tabs" (click)="select($event,item,i)" *ngIf="item.type=='tabs'"
            [class.select]="selectElIndex==i">
            <nz-tabset [(nzSelectedIndex)]="tabsIndex">
              <nz-tab nzTitle="{{item2.name}}" *ngFor="let item2 of item.tabs">
                <div class="tab-content" id="tab-content" dragula="PERSON" [dragulaModel]="item2.data">
                  <div class="tab-item" *ngFor="let item3 of item2.data;let j=index">
                    <div class="el item-move title" (click)="select($event,item3,i+'-'+j)" *ngIf="item3.type=='title'"
                      [class.select]="selectElIndex==i+'-'+j"
                      [ngStyle]="{backgroundColor:item3.backgroundColor,color: item3.color,textAlign:item3.textAlign}">
                      {{item3.text||'标题组件'}}
                    </div>

                    <div class="el item-move roomList" (click)="select($event,item3,i+'-'+j)"
                      *ngIf="item3.type=='roomList'" [class.select]="selectElIndex==i+'-'+j">
                      直播间列表组件
                    </div>
                    <div class="el item-move advert" (click)="select($event,item3,i+'-'+j)" *ngIf="item3.type=='advert'"
                      [class.select]="selectElIndex==i+'-'+j">
                      广告组件
                    </div>
                    <div class="el item-move static" (click)="select($event,item3,i+'-'+j)" *ngIf="item3.type=='static'"
                      [class.select]="selectElIndex==i+'-'+j">
                      静态内容组件
                    </div>
                    <div class="el item-move collectplatform" (click)="select($event,item3,i+'-'+j)"
                      *ngIf="item3.type=='collectplatform'" [class.select]="selectElIndex==i+'-'+j">
                      汇集平台
                    </div>
                    <div class="el item-move danmuList" (click)="select($event,item3,i+'-'+j)"
                      *ngIf="item3.type=='danmuList'" [class.select]="selectElIndex==i+'-'+j">
                      弹幕列表组件
                    </div>
                    <div class="el danmu" id="danmu-send" (click)="select($event,item3,i+'-'+j)"
                      *ngIf="item3.type=='danmu'" [class.select]="selectElIndex==i+'-'+j">
                      弹幕发送组件
                    </div>
                  </div>
                </div>
              </nz-tab>
            </nz-tabset>
          </div>
        </ng-container>
      </div>
    </nz-skeleton>
    <div class="right">
      <app-background-editor [document]="pageModel.model.document" [background]="pageModel.model.background"
        (onSave)="save()" *ngIf="selectElIndex=='background'">
      </app-background-editor>
      <ng-container *ngIf="selectEl">
        <app-title-editor [selectEl]="selectEl" (onSave)="save()" (onRemove)="removeEl()"
          *ngIf="selectEl.type=='title'">
        </app-title-editor>
        <app-player-editor [selectEl]="selectEl" (onSave)="save()" (onRemove)="removeEl()"
          *ngIf="selectEl.type=='player'">
        </app-player-editor>
        <app-room-list-editor *ngIf="selectEl.type=='roomList'" [selectEl]="selectEl" (onSave)="save()"
          (onRemove)="removeEl()">
        </app-room-list-editor>
        <app-adver-editor [selectEl]="selectEl" (onSave)="save()" (onRemove)="removeEl()"
          *ngIf="selectEl.type=='advert'">
        </app-adver-editor>
        <app-static-editor [selectEl]="selectEl" (onSave)="save()" (onRemove)="removeEl()"
          *ngIf="selectEl.type=='static'">
        </app-static-editor>
        <app-danmu-list-editor *ngIf="selectEl.type=='danmuList'" (onRemove)="removeEl()">
        </app-danmu-list-editor>
        <app-danmu-editor *ngIf="selectEl.type=='danmu'" (onRemove)="removeEl()">
        </app-danmu-editor>
        <app-tabs-editor [selectEl]="selectEl" (onSave)="save()" (onRemove)="removeEl()" *ngIf="selectEl.type=='tabs'">
        </app-tabs-editor>
        <app-collectplatform-editor [selectEl]="selectEl" (onSave)="save()" (onRemove)="removeEl()"
          *ngIf="selectEl.type=='collectplatform'">
        </app-collectplatform-editor>
      </ng-container>

    </div>
  </div>
</div>

<app-preview *ngIf="isVisible" [id]="id"></app-preview>
<div class="preview-mask" *ngIf="isVisible" (click)="isVisible=false"></div>
